/*
 * @Description:
 * @Author: GaoQiao
 * @Date: 2024-05-09 17:12:20
 * @LastEditTime: 2024-08-21 15:24:58
 * @LastEditors: 463997479@qq.com
 */
import HomeOutlined from '@ant-design/icons/HomeOutlined';
import { Breadcrumb, Button } from 'antd';
import { IS_SUBAPP, history } from 'umi';

import DetailModal from './components/DetailModal';
import EditModal from './components/EditModal';
import SearchTable from './components/SearchTable';
import { default as Container, default as hooks } from './hooks';
import styles from './index.less';

function Index() {
  const { appName } = hooks.useContainer();

  return (
    <div className={styles.container}>
      {IS_SUBAPP ? (
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
        </Breadcrumb>
      ) : (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item onClick={() => history.push('/')}>
              <HomeOutlined />
            </Breadcrumb.Item>
            <Breadcrumb.Item onClick={() => history.go(-1)}>
              <span style={{ color: '#000000', cursor: 'pointer' }}>{appName}</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          </Breadcrumb>
          <Button onClick={() => history.go(-1)}>返回</Button>
        </div>
      )}

      <div className={styles.page}>
        <SearchTable />
        <DetailModal />
        <EditModal />
      </div>
    </div>
  );
}

export default () => {
  return (
    <Container.Provider>
      <Index />
    </Container.Provider>
  );
};
